<template>
  <div id="home">
    <router-view></router-view>
    <van-tabbar v-model="active"  fixed @change="activeChange" style="z-index: 2">
      <van-tabbar-item info="5" to="/" :replace=true icon="wap-home">首页</van-tabbar-item>
      <van-tabbar-item to="coupon" :replace=true icon="coupon">上百券</van-tabbar-item>
      <van-tabbar-item to="goods" :replace=true  icon="point-gift">有好货</van-tabbar-item>
      <van-tabbar-item to="circle" :replace=true  icon="check">发朋友圈</van-tabbar-item>
      <van-tabbar-item to="my" icon="contact" >会员中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
  export default {
    name: 'home',
    data() {
      return {
        active: parseInt(localStorage.getItem("activeBar")),
        icon: {
          normal: '//img.yzcdn.cn/icon-normal.png',
          active: '//img.yzcdn.cn/icon-active.png'
        },
        loading: false
      }
    },
    created () {
      this.getInfo()
    },
    methods: {
      getInfo () {

      },
      activeChange(active) {
        localStorage.setItem("activeBar", active);
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #home {
    padding-bottom: 50px;
  }
</style>
<style>
  #home .van-tabbar-item{
    position: relative;
    z-index: 10;
  }
  #home .van-tabbar-item--active{
    color: #e12532;
  }
</style>
`
